<template>
    <div class="layout-type-list" >
        <div @click="handleChangeLayoutType(item.value)" :class="['layout-type-list--item',{'checked':config.layoutType == item.value }]"   v-for="(item,index) in layoutList" :key="index" >
            <div class="layout-type-list--imgdiv" >
                <img class="layout-type-list--img" :src="item.img" >
                <div class="layout-type-list--checked" v-if="config.layoutType == item.value" >
                    <i class="el-icon-check" ></i>
                </div>
            </div>
            <p class="layout-type-list--label" >{{$t(item.label)}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'webcode-layout',
    inject: ["formConfig"],
    components:{
    },
    computed:{
        config(){
            return this.formConfig;
        }
    },
    data(){
        return {
            // 布局设置
            layoutList:[
                {
                    img:`${this.rootUrl}img/form/layout.png`,
                    value:1,
                    label:'普通列表'
                },
                {
                    img:`${this.rootUrl}img/form/layout-left.png`,
                    value:2,
                    label:'左侧树形+普通列表'
                }
            ]
        };
    },
    created () {
    },
    methods:{
        handleChangeLayoutType(type){
            this.config.layoutType = type;
        }
    }
}
</script>
<style lang="scss" scoped>
.layout-type-list{
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;

    &--item{
        width: 144px;
        margin:0 0 16px 16px;
    }

    &--imgdiv{
        width: 144px;
        height: 100px;
        background: #f1f2f5;
        border-radius: 2px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        border: 1px solid #f1f2f5;
    }

    &--item.checked &--imgdiv{
        border: 1px solid #409eff;
    }

    &--img{
        height: 100%;
        width: 100%;
    }

    &--label{
        font-size: 12px;
        color: #606266;
        margin-top: 8px;
        text-align: center;
    }

    &--checked{
        border: 12px solid #409eff;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top-right-radius: 2px;
        position: absolute;
        right: 3px;
        top: 3px;
        .el-icon-check{
            position: absolute;
            top: -10px;
            left: -2px;
            font-size: 12px;
            color: #fff;
        }
    }
}
</style>